import React, {Component} from 'react';
import {View, StyleSheet, Image, Text, Platform, Navigator} from  'react-native';

import TabNavigator from 'react-native-tab-navigator';

import Home from '../Home/Home';
import Mine from '../Mine/Mine';
import Shop from '../Shop/Shop';
import More from '../More/More';

let HomeIcon = require('../../img/icon_tabbar_homepage.png');
let HomeIconSelected = require('../../img/icon_tabbar_homepage_selected.png');

let ShopIcon = require('../../img/icon_tabbar_merchant_normal.png');
let ShopIconSelected = require('../../img/icon_tabbar_merchant_selected.png');

let MineIcon = require('../../img/icon_tabbar_mine.png');
let MineIconSelected = require('../../img/icon_tabbar_mine_selected.png');

let MoreIcon = require('../../img/icon_tabbar_misc.png');
let MoreIconSelected = require('../../img/icon_tabbar_misc_selected.png');

export default class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'Home'
        };
        this.renderTabBarItem = this.renderTabBarItem.bind(this)
    }

    render() {
        return (
            <View style={styles.container}>
                <TabNavigator>

                    {this.renderTabBarItem('首页', HomeIcon, HomeIconSelected, 'Home', '首页', Home)}
                    {this.renderTabBarItem('配送点', ShopIcon, ShopIconSelected, 'Shop', '配送点', Shop)}
                    {this.renderTabBarItem('我的', MineIcon, MineIconSelected, 'Mine', '我的', Mine)}
                    {this.renderTabBarItem('更多', MoreIcon, MoreIconSelected, 'More', '更多', More, 10)}

                </TabNavigator>
            </View>
        );
    }

    renderTabBarItem(title, icon, selectedIcon, selectedTab, componentName, component, badgeText) {
        return (
            <TabNavigator.Item
                title={title}
                selected={this.state.selectedTab === selectedTab}
                onPress={() => this.setState({selectedTab: selectedTab})}
                selectedTitleStyle={styles.tabSelectedStyle}
                badgeText={badgeText}
                renderIcon={() =>
                <Image source={icon} style={styles.iconStyle}/>
                }
                renderSelectedIcon={() =>
                <Image source={selectedIcon} style={styles.iconStyle}/>
                }
            >
                <Navigator
                    initialRoute={{name:componentName,component:component}}
                    configureScene={(route)=>{
                        return Navigator.SceneConfigs.PushFromRight;}
                    }
                    renderScene={(route,navigator)=>{
                        let Component = route.component;
                        if(route.component){
                            return <Component {...route.params} navigator={navigator}/>
                        }
                    }}
                />
            </TabNavigator.Item>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    tabSelectedStyle: {
        color: 'orange'
    },
    iconStyle: {
        width: Platform.OS === 'IOS' ? 30 : 25,
        height: Platform.OS === 'IOS' ? 30 : 25
    }
});
